<template>
    <div>
        <a-form :form="form" layout="inline" @submit.prevent="onSubmit" id="addMenuForm" :style="{marginBottom: '20px'}">
            <a-row>
                <a-col :span = '12'>
                    <a-row>
                        <a-col :span="10">
                            <a-form-item>
                                <a-input placeholder="菜单名称" v-decorator="['name']"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span = '14'>
                            <a-form-item>
                                <a-button type="primary" html-type="submit">
                                    筛选
                                </a-button>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-col>
                <a-col :span = '12'>
                    <a-form-item :style="{float: 'right'}">
                        <a-button type="primary"  v-if="menu_role.includes('/menu/create')" @click="showCreate" icon="plus">添加菜单</a-button>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" bordered>
            <template slot="action" slot-scope="text, record">
                <div class="delete-image">
                <router-link :to="'/menu-update/'+record.id" v-if="menu_role.includes('/menu-update')"><img src="./../../assets/images/view.svg" alt="">
                </router-link>
                <a href="#" v-if="menu_role.includes('/menu/delete')" @click.stop.prevent="showModal(record)">
                  <img src="./../../assets/images/delete.svg" alt="">
                </a>
                </div>
          </template>
        </a-table>
        <a-modal
            v-model='show_delete'
            title='删除菜单'
            @ok = 'handleDelete'
            width="450px"
            :cancelButtonProps="{ props: {type: 'primary'}}"
            centered
            :keyboard = 'false'
            okText = '删除'
            :maskClosable = 'false'
        >
            <div class="confirm-delete-wrapper">
                <p>是否删除此账号？</p>
            </div>
        </a-modal>
        <a-modal v-model="show_create" title="添加菜单" @ok="createSubmit" @cancel="cancel"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 centered
                 :keyboard = 'false'
                 okText = '确认'
                 :maskClosable = 'false'>
            <create ref="create" @getList="getList"  @hideCreate="hideCreate"></create>
        </a-modal>
    </div>
</template>


<script>
    import Create from './create';
    export default {
        components: {Create},
        data() {
            return {
                is_admin:this.$store.getters.is_admin,
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        this.handleChange(page, size)
                    },
                },
                tableData: [],
                
                columns: [
                    {title: 'ID', dataIndex: 'id', align: 'center'},
                    {title: '菜单名称', dataIndex: 'name', align: 'center'},
                    {title: '菜单路径', dataIndex: 'url', align: 'center'},
                    {title: '状态', dataIndex: 'status', align: 'center'},
                    {title: '是否为菜单', dataIndex: 'is_menu', align: 'center'},
                    {title: '操作', scopedSlots: {customRender: 'action'}, align: 'center'},
                ],
                form: this.$form.createForm(this),
                search: {},
                show_delete: false,
                show_create: false,
                deleteRow: {},
            }
        },
        async mounted() {
            await this.getList();
            
        },
        methods: {
            async getList(param = {}) {
                let req = {page_size: this.pagination.pageSize, page: this.pagination.current};

                let data = await this.http(
                    "get",
                    "menu/index",
                    Object.assign(req, param)
                );
                this.tableData = data.data;
                this.pagination.total = data.total_count;
            },
            showModal(row) {
                this.show_delete = true;
                this.deleteRow = row;
            },
            showCreate() {
                this.show_create = true;
            },
            hideCreate() {
                this.show_create = false;
            },
            cancel() {
                this.$refs.create.form.resetFields();
            },
            createSubmit() {
                this.$refs.create.onSubmit()
                
            },
            onSubmit() {//搜索提交
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.pagination.current = 1;
                        this.search = values;
                        this.getList(values)
                    }
                })
            },
            handleChange(page, size) {
                //列表展示条数改变
                this.pagination.current = page;
                this.pagination.pageSize = size;
                this.getList(this.search);
            },
            handleDelete() {
                let that = this;
                let row = this.deleteRow;
                that.deleteData(row.id).then(res => {
                    if (res.status == "success") {
                        that.$message.success("删除成功!", 1);
                        that.getList();
                    } else {
                        that.$message.error("删除失败!", 1);
                    }
                });
                this.show_delete = false;
            },
            async deleteData(id) {
                return await this.http("delete", "menu/delete", {id: id});
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    #addMenuForm {
        .ant-input {
            width: 225px;
        }

        .ant-select {
            width: 180px;
        }
    }

    .confirm-delete-wrapper {
        width: 100%;
        padding: 20px;
        text-align: center;
        p {
            font-size: 16px;
        }
    }

    @media screen and (max-width: 1366px) {
        #addMenuForm {
            .ant-input {
                width: 185px;
            }

            .ant-select {
                width: 148px;
            }
        }
    }
</style>
